<!--  -->
<template>
  <el-dialog
    :title="title"
    :visible="isShow"
    :width="dialogWidth"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="8vh"
    destroy-on-close
  >
    <div class="dialog-container">
      <!-- table表格 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        :show-header="false"
        height="88%"
        :cell-style="{ background: '#fff' }"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
      >
        <el-table-column prop="id" label="最近通行记录">
          <template v-slot="{ row }">
            <div class="flex-row align-center">
              <div v-if="row.createTime">
                {{row.createTime | dateTimeFormatter}}
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="deviceVO.remarkName" label="进入区域" />

        <el-table-column prop="orgName" label="所属组织">
          <template v-slot="{ row }">
            <span
              :class="{'success-text': row.deviceVO.iotBizEnumName === '人员进入'}"
              v-if="row.deviceVO"
            >
              {{row.deviceVO.iotBizEnumName}}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="fileId" label="头像" width="100">
          <template v-slot="{ row }">
            <div>
              <img v-if="row.fileId" class="avatar-img" :src="row.fileId | imageFormat" alt="" />
              <svg-icon v-else class="avatar-img" icon-class="person-icon"></svg-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next, total, jumper"
        :total="total"
        :page-size="queryInfo.pageSize"
        @current-change="handlePageChange"
      />
    </div>
  </el-dialog>
</template>

<script>
import { apiGetAccessRecord } from '../api'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  props: {
    isShow: { type: Boolean, default: false },
    personId: { type: String, default: '' },
    personName: { type: String, default: '' },
  },
  data() {
    return {
      isLoading: false,
      queryInfo: {
        black: true,
        personIds: [],
        pageNo: 1,
        pageSize: 11,
      },
      tableData: [],
      total: 0,
      loading: false,
    }
  },

  watch: {
    personId: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return
        this.queryInfo.personIds = [newValue]
        this.getTableData()
      },
    },
  },

  components: {},

  computed: {
    title() {
      return `通行记录-${this.personName}`
    },
    dialogWidth() {
      return `${handleScreenWidthToVw(1092)}px`
    },
  },

  methods: {
    async getTableData() {
      // TODO 查询
      try {
        const res = await apiGetAccessRecord(this.queryInfo)
        this.total = res.total || 0
        this.tableData = res.records || []
      } catch (error) {
        console.log(`apiGetPersonList request error`, error)
      }
    },
    handlePageChange(pageNo) {
      this.queryInfo.pageNo = pageNo
      this.getTableData()
    },
    handleClose() {
      this.$emit('close')
    },
  },
}
</script>
<style lang='scss' scoped>
.dialog-container {
  display: flex;
  flex-direction: column;
  // align-items: center;
  // justify-content: center;
  height: 70vh;
}

.dialog-children {
  flex-shrink: 0;
}

.avatar-img {
  width: vh(30px);
  height: vh(30px);
}

.success-text {
  color: #67c337;
}
</style>
